<template>
    <div>
        <x-header :left-options="{backText: ''}" class="ret">
            <div class="retTitle">会员卡</div> 
        </x-header>
        
        <group>
            <cell title="我要充值" value="" is-link @click.native="onRecharge"></cell>
        </group>
         <!-- 会员卡内容 -->
        <div class="card">
            <!-- 会员卡图 -->
            <img :src='cardImgUrl' class="round">
            <!-- 会员卡号 -->
            <div class="cardNumber">
                <p class="cardFont">
                    NO. {{cardNumber}}
                </p>
            </div>
            <!-- 商家logo，名称 -->
            <div class="logo">
                <div class="logoInline">
                    <img class="logoImg" v-lazy="logoUrl" :onerror="defaultImg"> 
                </div>
                <div class="logoName">  
                    {{name}} VIP
                     <!-- <br/>
                    {{activityName}}  -->
                </div> 
            </div>
            <!-- 余额 -->
            <div class="money"> 
                <i class="iconfont icon-chakanxiangqing1 cardFont">
                    <a v-on:click="getBalance"> 余额￥{{money}}</a>
                </i>   
            </div>
            <!-- 激活按钮 --> 
            <div v-show="isAtivateBefore" style="text-align:center;width:100px;height:auto;position:absolute;right:40%;bottom:20px;z-index:2;">
                <x-button :gradients="['#FF5E3A', '#FF9500']" mini @click.native="ativateMember">激活会员卡</x-button>
            </div>
            <!-- 付款码按钮 -->
            <div v-show="isShowBtn" style="text-align:center;width:100px;height:auto;position:absolute;right:40%;bottom:20px;z-index:2;">
                <x-button :gradients="['#A644FF', '#FC5BC4']" mini @click.native="getPayment">我要付款</x-button>
            </div>
        </div>
        <!-- 支付二维码、条形码 -->
        <div v-show="isAtivateAfter">
            <divider>扫一扫付款码支付</divider>
            <div style="text-align:center;margin-top:5px;">
                <barcode :value="payNo" :options="{height:60,width:1.6,displayValue:false,marginBottom:1}"></barcode>
                <br />
                <p>{{ spritStr(payNo) }}</p> 
                <qrcode :value="payNo" :options="{height:200,width:1.6,displayValue:false,marginBottom:1}"></qrcode>
            </div>
        </div> 

        <div v-transfer-dom> 
            <confirm v-model="showConfirm"
                :title="'提示'"
                @on-cancel="onCancel"
                @on-confirm="onConfirm">
                <p style="text-align:center;">{{ '确定激活会员卡？' }}</p>
            </confirm>
        </div>
    </div>
</template>

<script>
import { sign, signStr } from "@/assets/js/sign.js";
import { hex_sha1 } from "@/assets/js/sha1.js";
 import { XHeader,Group,Cell,Qrcode,Divider,XButton,Confirm,Flexbox, FlexboxItem, TransferDomDirective as TransferDom } from 'vux'
    export default {
        directives: {
            TransferDom
        },
        components: { XHeader,Group,Cell,Qrcode,Divider,XButton,Confirm,Flexbox, FlexboxItem  } ,
        created() {
            this.create();
        },
        data () {
            return { 
                cardImgUrl: require("@/assets/img/bg1.jpg"),    //会员卡图
                logoUrl: require("@/assets/img/vip-bj7.png"),       //商家logo
                defaultImg: require("@/assets/img/logo.png"),       //商家logo出错图片
                isAtivateAfter: false,    //激活后，会员卡信息是否显示
                isAtivateBefore: true,    //激活前，会员卡信息是否显示
                isShowBtn: false,           //是否显示付款码按钮
                money: 0.00,    //余额
                name:'',    //商家名称
                cardNumber: '', //会员卡号
                activityName:'', //活动名称
                membersj: null,   //商家会员信息
                memberpt: null,     //平台会员信息
                payNo: '0', //付款码
                showConfirm: false,
                business: null
            }
        },
        methods: {
            create(){ 
                this.business = this.$store.state.sellerInfo;
                this.memberpt = this.$store.state.memberInfoPt;
                this.membersj = this.$store.state.memberInfoSj;
                // console.log('PTHX: '+ JSON.stringify(this.memberpt))
                // console.log('SJHX: '+ JSON.stringify(this.membersj))

                if(this.membersj == null) {
                    this.onHide();
                    return;
                }
                this.showInfo();
                // this.memberpt = JSON.parse(localStorage.getItem("memberpt"));
                
            },
            showInfo(){
                this.onShow();
                this.money = this.membersj.zhangsje; 
                this.cardNumber = this.membersj.huiybh; 
                this.name = this.business.name;
                this.logoUrl = this.business.logoImgs; 
            },
            onRecharge(){
                if(this.membersj == null){
                    this.$vux.toast.show({ type: "text",text: '请激活会员卡' }); 
                    return;
                }
                this.$router.push("/URecharge");
            },
            //进入余额页面
            getBalance(){
                if(this.membersj == null){
                    this.$vux.toast.show({ type: "text",text: '请激活会员卡' }); 
                    return;
                }
                this.$router.push("/MyBalance");
            },
            //激活后，显示会员卡信息
            onShow(){
                // this.isAtivateAfter = true;
                this.isShowBtn = true;
                this.isAtivateBefore = false;
            },
            //激活前，隐藏的信息
            onHide(){
                this.isAtivateAfter = false;
                this.isShowBtn = false;
                this.isAtivateBefore = true;
                this.cardNumber = '0';
                this.money = 0;
                this.name = '';
            }, 
            //跳转至激活页面
            ativateMember(){
                this.showConfirm = true;
            },
            onConfirm(){
                if(this.memberpt == null){
                    this.$vux.toast.show({ type: "text",text: '请登录' }); 
                    return;
                }
                let phone = null;
                phone = this.memberpt.dianh; 
                //手机号为空，则跳转手机验证页面
                if(phone == null || phone == "null" || phone == ""){
                    this.$router.push("/UAtivate");
                }else{  //否则直接激活
                    this.onAtivateMember();
                }
            },
            onCancel(){
                this.showConfirm = false;
            },
            //直接激活会员
            onAtivateMember(){

                let urlparam = sign("/v1/api/member/MemberActivate"); 
                urlparam.append("pthyid", this.memberpt.id);
                urlparam.append("sjid",this.business.id);
                urlparam.append("phone",this.memberpt.dianh);   //已经存在手机号时
                urlparam.append("password",hex_sha1('888888')); //手机号不为空时默认
                urlparam.append("captcha", null);
                
                this.$http.post("member/MemberActivate", urlparam).then(ret => {
                    if (ret.status == 200) {
                        var _data = ret.data.resultObject;
                        var _code = ret.data.code || ret.data.result.code;
                        var _msg = ret.data.msg || ret.data.result.msg;
                        
                        if (_code == 1) {
                            
                            this.$store.commit("addMemberInfoSj", _data.hycx);
                            this.membersj = _data.hycx; 
                            this.$vux.toast.show({ text: '激活成功!' });
                            
                            this.showPwd = false; 
                            this.showMsg = false; 
                            this.showInfo();
                            // this.$router.push("/MyCard");
                            return 1;
                        } else {
                            this.$vux.toast.show({ type: "warn", text: _msg });
                            return -1;
                        }

                        return 1;
                            
                    } else {
                        this.$vux.toast.show({ type: "warn", text: ret.data.msg });
                        return 0;
                    }
                })
                .catch(err => {
                    this.$vux.toast.show({ type: "warn", text: err.data.msg });
                    return -1;
                });
            },
            // 获取付款码
            getPayment(){
                this.onShow();
                this.isAtivateAfter = true;

                let urlparam = sign("/v1/api/member/getPaymentNo");  
                urlparam.append("hycxid",this.membersj.id)
                this.$http.post("member/getPaymentNo", urlparam).then(ret => {
                    if (ret.status == 200) {
                        var _data = ret.data.resultObject;
                        var _code = ret.data.code || ret.data.result.code;
                        var _msg = ret.data.msg || ret.data.result.msg;
                        
                        if (_code == 1) {
                            this.payNo = _data;
                            // console.log(JSON.stringify(_data))
                        }
                    }
                });
            },
            spritStr(str){
                let str1 = str.replace(/\s/g,'').replace(/(.{4})/g,"$1-");
                if(str1.substr(str1.length-1,1)=="-"){
                    str1 = str1.substr(0,str1.length-1);
                }
                return str1;
            }
        } 
    }
</script>

<style scoped lang="less">

.ret {
    background-color:#fff; 
 }
 .retTitle{
     color: #000;
     font-size: 14px;
 } 
 .round { 
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;
     border-radius:15px;
     max-width:100%;
     z-index: 1;
}
.logo{
    width:300px;height:60px;position:absolute;left:20%;bottom:40%;z-index:2;line-height:50px;
    // text-align:center;
    .logoInline{ 
        display:inline;
        .logoImg {
            float: left;
            margin-left: 10px;
            // margin-top: 10px;
            width: 50px;
            height: 50px; 
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            // display: inline;
        }
    }
    .logoName{
        font-size: 24px;padding-left:8px;color:#fff;text-align:left;display:inline-block;
    }
}
.card{
    padding-right:20px;padding-top:10px;padding-left:20px;position:relative;z-index:1;
    .cardNumber{
        width:200px;height:auto;position:absolute;left:35px;top:20px;z-index:2;background:rgba(255, 255, 255, 0);
    }
    .cardFont{
        font-size:14px;font-family: 'Arial','Microsoft YaHei','黑体','宋体',sans-serif;color:#fff;
    }
}
.money{
    width:100px;height:auto;position:absolute;right:20px;bottom:20px;z-index:2;
}
</style>